<template>
    <div class="release">
        <audio ref="audio" autoplay src="@/assets/zuiweidadezuopin.mp3"></audio>
        <div class="header">
            <span>发布</span>
        </div>
        <div class="container">
            <van-field v-model="value" label="请输入标题" />
            <van-field v-model="message" rows="2" autosize label="请输入内容" type="textarea" maxlength="5000"
                show-word-limit />
        </div>
        <div class="ctrl">
            <van-uploader v-model="fileList" :after-read="afterRead" />
            <van-radio-group v-model="radio" direction="horizontal">
                <van-radio @click="getClassNum(item.name, item._id)" :style="{ margin: '5px 5px' }" :name="i"
                    v-for="(item, i) in classList" :key="item.id">
                    {{ item.name }}
                </van-radio>
            </van-radio-group>
            <van-button :style="{ margin: '50px 0' }" type="primary" @click="Submit">确定</van-button>
        </div>
        <navBar />
    </div>
</template>

<script>
import { getClass } from '../request/api/home.js'
import { addArticle } from '../request/api/release.js'
import { mapState } from 'vuex';
import navBar from '@/components/navBar/navBar.vue'
export default {
    name: 'release',
    data() {
        return {
            showPopover: false,
            fileList: [
                'https://crush__822.gitee.io/photo--black/photo/kun1.jpg',
                'https://crush__822.gitee.io/photo--black/photo/kun2.jpg',
                'https://crush__822.gitee.io/photo--black/photo/kun3.jpg',
            ],
            value: '',
            message: '',
            radio: '1',
            classList: [],
            cateName: '',
            cateId: ''
        }
    },
    computed: {
        ...mapState(['author', 'author_id'])
    },
    components: {
        navBar
    },
    methods: {
        afterRead(file) {
            // 此时可以自行将文件上传至服务器
            console.log(file.content);
        },
        async Submit() {
            let res = await addArticle({
                title: this.value,
                content: this.message,
                cate_name: this.cateName,
                cate_id: this.cateId,
                author: this.author,
                author_id: this.author_id,
                imageSrc: this.fileList
            })
            if (res.data.msg == '成功') {
                this.$toast(res.data.msg);
            } else {
                this.$toast(res.data.msg);
            }
        },
        getClassNum(name, id) {
            this.cateName = name;
            this.cateId = id;
        }
    },
    async mounted() {
        let res = await getClass();
        // console.log(res.data.data);
        this.classList = res.data.data;
    }
}
</script>

<style lang="less">
.release {
    width: 100%;
    height: 100%;

    .header {
        width: 100%;
        height: 50px;
        background: rgb(7, 193, 96);
        display: flex;
        align-items: center;
        justify-content: center;

        span {
            color: #fff;
            font-size: 17px;
        }
    }

    .container {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .ctrl {
        width: 100%;
        display: flex;
        flex-direction: column;
        margin-top: 10px;
    }
}
</style>